<template>
  <div ref="loginRef" class="login" @touchmove.prevent>
    <div class="box signinBx">
      <form class="form">
        <h2>登 录</h2>
        <div class="inputBox">
          <input type="text" required="required" v-model="userInformForm.username"/>
          <span>用户名</span>
          <i></i>
        </div>
        <div class="inputBox">
          <input type="password" required="required" autocomplete="on" v-model="userInformForm.password"/>
          <span>密码</span>
          <i></i>
        </div>
        <div class="inputBox verify">
          <input type="text" required="required" v-model="userInformForm.code"/>
          <span>验证码</span>
          <i></i>
          <img :src="codeUrl" @click="getCode" class="login-code-img" alt="图片验证码"/>
        </div>
        <div class="links">
          <a href="javascript:;">忘记密码</a>
          <a href="javascript:;" @click="changeForm($event)">手机号登录</a>
          <a href="javascript:;" @click="changeForm($event)">注册</a>
        </div>
        <input type="submit" @click="handleLogin" value="Login"/>
      </form>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
    </div>
    <div class="box signinPhoneBx">
      <form class="form phone active" ref="phoneLoginRef">
        <h2>登 录</h2>
        <div class="inputBox">
          <input type="text" required="required" @keyup="checkPhone" v-model="userInformForm.phone" autocomplete="off" />
          <span>手机号</span>
          <i></i>
          <div class="validation">
            <ul ref="userPhoneValidationRef">
              <li id="">正确的手机号</li>
            </ul>
          </div>
        </div>
        <div class="inputBox verify">
          <input type="text" required="required" v-model="userInformForm.code"/>
          <span>验证码</span>
          <i></i>
          <van-button class="login-code-btn" @click="handleOpen">{{ codeMsg }}</van-button>
        </div>
        <div class="links">
          <a href="javascript:;">忘记密码</a>
          <a href="javascript:;" @click="changeForm($event)">密码登录</a>
          <a href="javascript:;" @click="changeForm($event)">注册</a>
        </div>
        <input type="submit" @click="handleLoginByPhone" value="Login"/>
      </form>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
    </div>
    <div class="box signupBx">
      <form class="form">
        <h2>注 册</h2>
        <div class="inputBox">
          <input type="text"
                 required="required"
                 @keyup="checkUserName"
                 v-model="userInformForm.username"
                 autocomplete="off"/>
          <span>邮箱</span>
          <i></i>
          <div class="validation">
            <ul ref="userNameValidationRef">
              <li id="">正确的手机号/邮箱号</li>
            </ul>
          </div>
        </div>
        <div class="inputBox">
          <input
              type="password"
              required="required"
              @keyup="checkPassword"
              v-model="userInformForm.password"
              autocomplete="off"
          />
          <span>密码</span>
          <span class="toggleBtn" @click="toggleBtn"></span>
          <i></i>
          <div class="validation">
            <ul ref="passwordValidationRef">
              <li id="lower">至少一位小写字符</li>
              <li id="upper">至少一位大写字符</li>
              <li id="number">至少一位数字</li>
              <li id="special">至少一位特殊字符</li>
              <li id="length">不少于8个字符</li>
            </ul>
          </div>
        </div>
        <div class="inputBox">
          <input type="password" required="required" @keyup="checkConfirmPassword" autocomplete="off"
                 v-model="userInformForm.confirmPassword"/>
          <span>确认密码</span>
          <span class="toggleBtn" @click="toggleBtn"></span>
          <i></i>
          <div class="validation">
            <ul ref="passwordConfirmValidationRef">
              <li>和上个输入框的密码相同</li>
              <li>满足安全密码条件</li>
            </ul>
          </div>
        </div>
        <div class="inputBox verify">
          <input type="text" required="required" v-model="userInformForm.code"/>
          <span>验证码</span>
          <i></i>
          <img :src="codeUrl" @click="getCode" class="login-code-img" alt="图片验证码"/>
        </div>
        <div class="links">
          <a href="javascript:;">忘记密码</a>
          <a href="javascript:;" @click="changeForm($event)">手机号登录</a>
          <a href="javascript:;" @click="changeForm($event)">登录</a>
        </div>
        <input type="submit" @click.prevent="handleRegister" value="Register"/>
      </form>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
      <span class="formBorder"></span>
    </div>
    <!--  滑动验证  -->
    <SwipeVerify ref="verifyRef" :is-show="isShow" @close="isShow = false" @open="isShow=true"></SwipeVerify>
    <!--  水滴  -->
    <a href="javascript:;" class="btns"></a>
    <a href="javascript:;" class="btns signup"></a>
  </div>
</template>

<script setup>
import {getCodeImg, getSms, register} from "@/api/login";
import {computed, reactive, ref, watch, onBeforeUnmount, getCurrentInstance} from "vue";
import {showNotify, showToast} from 'vant';
import 'vant/es/notify/style';
import Cookies from "js-cookie";
import SwipeVerify from "@/components/swipeVerify/common/index.vue"
import {validEmail, validTel} from "@/utils/validate.js";
import {decrypt} from "@/utils/jsencrypt.js";
import useUserStore from "@/stores/modules/user.js";
import useSlideVerifyStore from "@/stores/modules/slideVerify.js";
import {useRouter} from "vue-router";
const userStore = useUserStore()
const loginRef = ref();
const phoneLoginRef = ref();
const isShow = ref(false);
const userNameValidationRef = ref();
const passwordValidationRef = ref();
const passwordConfirmValidationRef = ref();
const userPhoneValidationRef = ref();
// 验证码开关
const captchaEnabled = ref(true);
const redirect = ref(undefined);
// 验证码地址
const codeUrl = ref("");
const router = useRouter();
const {proxy} = getCurrentInstance();

// 用户信息表单
const userInformForm = reactive({
  username: "",
  password: "",
  phone:"",
  confirmPassword: "",
  rememberMe: false,
  code: "",
  uuid: "",
});

// 重置userInformForm
const resetUserInformForm = () => {
  userInformForm.username = "";
  userInformForm.password = "";
  userInformForm.phone = "";
  userInformForm.confirmPassword = "";
  userInformForm.code = "";
  userInformForm.uuid = "";
};

// 注册登录的切换
const changeForm = (event) => {
  resetUserInformForm();
  if (event.currentTarget.innerHTML == "手机号登录" || event.currentTarget.innerHTML == "密码登录"){
    if (loginRef.value.classList.contains('active') ){
      // 注册 -> 手机号登录
      loginRef.value.classList.toggle("active");
      loginRef.value.classList.toggle("active1");
      getCode();
    }else {
      // 手机号登录
      loginRef.value.classList.toggle("active1");
    }
  }else {
    if (loginRef.value.classList.contains('active1')){
      // 手机号登录 -> 注册
      loginRef.value.classList.remove("active1");
      loginRef.value.classList.toggle("active");
      getCode();
    }else {
      loginRef.value.classList.toggle("active");
      if (loginRef.value.classList.contains('active') && event.currentTarget.innerHTML == "注册"){
        // 注册
        getCode();
      }
    }
  }
};
// 显示、隐藏密码
const toggleBtn = ($event) => {
  let currentView = $event.currentTarget.parentNode.children[0];
  if (currentView.type === "password") {
    currentView.setAttribute("type", "text");
    $event.currentTarget.classList.add("hide");
  } else {
    currentView.setAttribute("type", "password");
    $event.currentTarget.classList.remove("hide");
  }
};
// 用户名校验
const checkUserName = () => {
  const username = userNameValidationRef.value.children[0];
  clearValid(userInformForm.username, username)
  if (userInformForm.username) {
    return validToggle(validEmail(userInformForm.username) || validTel(userInformForm.username), username);
  }
};
// 用户手机号码校验
const checkPhone = () =>{
  const phone = userPhoneValidationRef.value.children[0];
  clearValid(userInformForm.phone, phone)
  if (userInformForm.phone) {
    return validToggle(validTel(userInformForm.phone), phone);
  }
}
// 密码校验
const checkPassword = () => {
  const lowerCase = passwordValidationRef.value.children[0];
  const upperCase = passwordValidationRef.value.children[1];
  const digit = passwordValidationRef.value.children[2];
  const specialChar = passwordValidationRef.value.children[3];
  const minLength = passwordValidationRef.value.children[4];
  clearValid(userInformForm.password, lowerCase);
  clearValid(userInformForm.password, upperCase);
  clearValid(userInformForm.password, digit);
  clearValid(userInformForm.password, specialChar);
  clearValid(userInformForm.password, minLength);
  if (userInformForm.password) {
    // lower case validation check
    let lowerCaseFlag = validToggle(new RegExp("(?=.*[a-z])").test(userInformForm.password), lowerCase);
    // upper case validation check
    let upperCaseFlag = validToggle(new RegExp("(?=.*[A-Z])").test(userInformForm.password), upperCase);
    // number case validation check
    let digitFlag = validToggle(new RegExp("(?=.*[0-9])").test(userInformForm.password), digit);
    // special case validation check
    let specialCharFlag = validToggle(new RegExp("(?=.*[!@#\$%\^&\*])").test(userInformForm.password), specialChar);
    // minLength case validation check
    let minLengthFlag = validToggle(new RegExp("(?=^.{8,}$)").test(userInformForm.password), minLength);
    return lowerCaseFlag && upperCaseFlag && digitFlag && specialCharFlag && minLengthFlag;
  }
};
// 确认密码校验
const checkConfirmPassword = () => {
  const confirm = passwordConfirmValidationRef.value.children[0];
  const safe = passwordConfirmValidationRef.value.children[1];
  clearValid(userInformForm.confirmPassword, confirm)
  let safeFlag;
  if (userInformForm.confirmPassword) {
    let confirmFlag = validToggle(userInformForm.password != "" && userInformForm.password == userInformForm.confirmPassword, confirm);
    // 不满足密码条件
    if (!checkPassword()) {
      safeFlag = validToggle(false, safe);
    }else {
      safeFlag = validToggle(true, safe);
    }
    return confirmFlag && safeFlag;
  }
};
// 验证码校验
const checkCode = (data) => {
};
/**
 *
 * @param condition  条件
 * @param html  需要加标记的html
 * @returns {boolean}
 */
const validToggle = (condition, html) => {
  let flag = true;
  if (condition) {
    html.classList.remove("fail");
    html.classList.add("valid");
  } else {
    html.classList.remove("valid");
    html.classList.add("fail");
    flag = false;
  }
  return flag;
}
const clearValid = (data, html) => {
  if (data == "" || data == undefined || data == null) {
    html.classList.remove("fail");
    html.classList.remove("valid");
  }
}

// 滑动验证成功回调
function handleSuccess(val) {
  console.log(val)
};

function success(params) {
  console.log(params);
  // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
};

// 关闭滑块验证
function handleClose() {
  isShow.value = false;
}

// 开启滑块验证
function handleOpen() {
  if (!timer) {
    isShow.value = true;
  }else {
    showToast("请不要频繁获取验证码！")
  }
}

function getCode() {
  getCodeImg().then(res => {
    captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (captchaEnabled.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      userInformForm.uuid = res.uuid;
    }
  });
}

function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  userInformForm.value = {
    username: username === undefined ? userInformForm.username : username,
    password: password === undefined ? userInformForm.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  };
}

function handleRegister() {
  // 校验用户输入没问题后注册
  if(checkUserName && checkPassword && checkConfirmPassword){
    // 调用action的登录方法
    userStore.register(userInformForm).then(() => {
      showNotify({type: 'success', message: ' 注册成功！'});
      router.push({ path: redirect.value || "/" });
    }).catch(() => {
      // 重新获取验证码
      if (captchaEnabled.value) {
        getCode();
      }
    });
  }
}

function handleLogin() {
  // 校验用户输入没问题后注册
  if(checkUserName() && checkPassword()){
    console.log(111)
    // 调用action的登录方法
    userStore.login(userInformForm).then(() => {
      showNotify({type: 'success', message: ' 登录成功！'});
      router.push({ path: redirect.value || "/" });
    }).catch(() => {
      // 重新获取验证码
      if (captchaEnabled.value) {
        getCode();
      }
    });
  }
}

function handleLoginByPhone(){
  // 校验用户输入没问题后注册
  if(checkPhone()){
    // 调用action的登录方法
    console.log(userInformForm)
    userStore.loginByPhone(userInformForm).then(() => {
      showNotify({type: 'success', message: ' 登录成功！'});
      router.push({ path: redirect.value || "/" });
    }).catch(() => {
      // 重新获取验证码
      if (captchaEnabled.value) {
        getCode();
      }
    });
  }
}

getCode();
getCookie();



//倒计时秒数
let countdown = 60;
//按钮上的文字
const codeMsg = ref('获取验证码')
//定时器
let timer = null
/**
 * 监听滑动验证码
 */
watch(()=>useSlideVerifyStore().verified, (newValue, oldValue) => {
  console.log(newValue,oldValue)
  if (newValue){
    // 关闭滑动验证码
    handleClose()
    // showNotify({type: 'success', message: ' 验证成功！', duration: 1000 });
    // 发送短信验证码
    // 开始倒计时
    getSmsCode()
  }else if (!newValue){
    handleClose()
    // showNotify({type: 'danger', message: ' 验证失败！' ,duration: 1000 });
  }
},{ deep: true })

/** 获取验证码 */
function getSmsCode() {
  if (!checkPhone()){
    return
  }
  getSms({phone: userInformForm.phone}).then(res =>{
    console.log(res)
    userInformForm.uuid = res.data.uuid;
    // 验证码60秒倒计时
    if (!timer) {
      setTime()
    }
  })
}

/** 倒计时 */
function setTime(){
  timer = setInterval(() => {
    if (countdown > 0 && countdown <= 60) {
      countdown--;
      if (countdown !== 0) {
        codeMsg.value = `重新发送(${countdown})`;
      } else {
        clearInterval(timer);
        codeMsg.value = "获取验证码";
        countdown = 60;
        timer = null;
      }
    }
  }, 1000)
}


onBeforeUnmount(()=>{
  clearInterval(timer);
  timer = null;
})
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  min-height: 100vh;
  background: url("../../assets/icon.svg") no-repeat;
  background-position: center;
  overflow-y: hidden;
  overflow-x: hidden;
  //   opacity: 0.8;
  .box {
    position: absolute;
    width: 340px;
    height: 410px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    overflow: hidden;

    .form {
      position: absolute;
      z-index: 10;
      inset: 2px;
      background: #fff;
      opacity: 0.9;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -ms-border-radius: 8px;
      -o-border-radius: 8px;
      padding: 20px 18px;
      display: flex;
      flex-direction: column;

      h2 {
        color: var(--login-font-color);
        font-weight: 500;
        text-align: center;
        letter-spacing: 0.1em;
      }

      .inputBox {
        position: relative;
        width: 300px;
        margin-top: 35px;

        input {
          position: relative;
          width: 100%;
          padding: 20px 10px 10px;
          background: transparent;
          border: none;
          outline: none;
          color: #23242a;
          font-size: 1em;
          letter-spacing: 0.05em;
          z-index: 10;
        }

        span:first-of-type {
          position: absolute;
          left: 0;
          padding: 20px 0px 10px;
          font-size: 1em;
          color: #8f8f8f;
          pointer-events: none;
          letter-spacing: 0.05em;
          transition: 0.5s;
          -webkit-transition: 0.5s;
          -moz-transition: 0.5s;
          -ms-transition: 0.5s;
          -o-transition: 0.5s;
        }

        .toggleBtn {
          position: absolute;
          right: 10px;
          top: 8px;
          width: 34px;
          height: 34px;
          z-index: 10;
          background: rgba(0, 0, 0, 0.05);
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .toggleBtn::before {
          content: "\f06e";
          font-family: fontAwesome;
        }

        .toggleBtn.hide::before {
          content: "\f070";
          font-family: fontAwesome;
        }

        input:valid ~ span:first-of-type,
        input:focus ~ span:first-of-type {
          color: var(--login-font-color);
          transform: translateX(0px) translateY(-34px);
          -webkit-transform: translateX(0px) translateY(-34px);
          -moz-transform: translateX(0px) translateY(-34px);
          -ms-transform: translateX(0px) translateY(-34px);
          -o-transform: translateX(0px) translateY(-34px);
          font-size: 0.75em;
        }

        i {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          background-color: var(--login-font-color);
          border-radius: 4px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          -o-border-radius: 4px;
          transition: 0.5s;
          -webkit-transition: 0.5s;
          -moz-transition: 0.5s;
          -ms-transition: 0.5s;
          -o-transition: 0.5s;
          pointer-events: none;
          z-index: 9;
        }

        input:valid ~ i,
        input:focus ~ i {
          height: 44px;
        }
      }

      .inputBox.verify {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 300px;
        margin-top: 35px;

        input {
          width: 160px !important;
        }

        i {
          width: 160px !important;
        }

        .login-code-img{
          width: 110px;
          height: 40px;
          position: relative;
        }
      }

      .links {
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
          position: relative;
          margin: 10px 0;
          font-size: 0.75em;
          color: #8f8f8f;
          text-decoration: none;
          pointer-events: inherit;
          transition: 0.5s;
        }
        a:nth-child(2){
          left: 70px;
        }

        a:hover {
          scale: 1.1;
        }

        a:hover,
        a:nth-child(3) {
          color: var(--login-font-color);
        }
      }

      input:nth-of-type(1) ~ .validation,
      input:nth-of-type(2) ~ .validation,
      input:nth-of-type(3) ~ .validation {
        display: none;
      }

      input:nth-of-type(1):focus ~ .validation,
      input:nth-of-type(2):focus ~ .validation,
      input:nth-of-type(3):focus ~ .validation {
        display: block;
      }

      input[type="submit"] {
        border: none;
        outline: none;
        background: var(--login-font-color);
        color: #fff;
        padding: 11px 25px;
        width: 100px;
        position: relative;
        top: 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        font-weight: var(--primary-font-weight);
      }

    }
    span.formBorder:nth-child(2) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(to right, transparent, #17f3fd);
      animation: animate_one 2s linear infinite;
      -webkit-animation: animate_one 2s linear infinite;
    }

    @keyframes animate_one {
      0% {
        transform: translate(-100%);
        -webkit-transform: translate(-100%);
        -moz-transform: translate(-100%);
        -ms-transform: translate(-100%);
        -o-transform: translate(-100%);
      }
      100% {
        transform: translate(100%);
        -webkit-transform: translate(100%);
        -moz-transform: translate(100%);
        -ms-transform: translate(100%);
        -o-transform: translate(100%);
      }
    }

    span.formBorder:nth-child(3) {
      position: absolute;
      top: 0;
      right: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to bottom, transparent, #17f3fd);
      animation: animate_one 2s linear infinite;
      -webkit-animation: animate_two 2s linear infinite;
      animation-delay: 1s;
    }

    @keyframes animate_two {
      0% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
      }
      100% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
      }
    }

    span.formBorder:nth-child(4) {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(to left, transparent, #17f3fd);
      animation: animate_three 2s linear infinite;
      -webkit-animation: animate_three 2s linear infinite;
    }

    @keyframes animate_three {
      0% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
      }
    }

    span.formBorder:nth-child(5) {
      position: absolute;
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      background: linear-gradient(to top, transparent, #17f3fd);
      animation: animate_four 2s linear infinite;
      -webkit-animation: animate_four 2s linear infinite;
      animation-delay: 1s;
    }

    @keyframes animate_four {
      0% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        -ms-transform: translateY(100%);
        -o-transform: translateY(100%);
      }
      100% {
        transform: translateY(-100%);
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
      }
    }
  }

  .signupBx {
    top: 100%;
    transition: 0.5s;
  }

  .signinPhoneBx{
    left: 100%;
    transition: 0.5s;
  }

  .signinBx {
    bottom: 22%;
    transition: 0.5s;
  }
}

.login.active {

  .box {
    height: 475px;
  }

  .signupBx {
    top: 90px;
    transition: 0.5s;
  }

  .signinBx {
    bottom: 100%;
    transition: 0.5s;
  }
}

.login.active1 {

  .box {
    height: 380px;
  }

  .signinPhoneBx{
    left: 18px;
    transition: 0.5s;
  }

  .signinBx {
    bottom: 100%;
    transition: 0.5s;
  }
}

.validation {
  position: absolute;
  z-index: 12;
  width: 100%;
  background-color: #376488;
  padding: 10px;
  margin-top: 30px;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
  transition: visibility 0.5s linear;
}

.validation ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.validation ul li {
  position: relative;
  list-style: none;
  color: #fff;
  font-size: 0.85em;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.validation ul li.valid {
  color: #fff;
}

.validation ul li::before {
  content: "\f192";
  font-family: fontAwesome;
  width: 20px;
  height: 10px;
  display: inline-flex;
}

.validation ul li.valid::before {
  content: "\f058";
  font-family: fontAwesome;
  color: greenyellow;
}

.validation ul li.fail::before {
  content: "\f00d";
  font-family: fontAwesome;
  color: red;
}

.btns {
  z-index: 9;
  position: absolute;
  bottom: 20px;
  width: 120px;
  height: 120px;
  background: #c61dff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  font-size: 0.8em;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  -moz-transition: 0.25s;
  -ms-transition: 0.25s;
  -o-transition: 0.25s;
  box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),
  15px 25px 10px rgba(190, 1, 254, 0.1), 15px 20px 20px rgba(190, 1, 254, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.9);

  border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -webkit-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -moz-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -ms-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -o-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}

.btns:hover {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.btns::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 30px;
  width: 20px;
  height: 20px;
  border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -webkit-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -moz-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -ms-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  -o-border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
  background: #fff;
  opacity: 0.45;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}

.btns:hover:before {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.btns.signup {
  bottom: 60px;
  right: 16px;
  width: 80px;
  height: 80px;
  border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -webkit-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -moz-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -ms-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -o-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  background-color: #01b4ff;
  box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),
  15px 25px 10px rgba(1, 180, 255, 0.1), 15px 20px 20px rgba(1, 180, 255, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.9);
}

.btns.signup::before {
  left: 20px;
  width: 15px;
  height: 15px;
  border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -webkit-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -moz-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -ms-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
  -o-border-radius: 49% 51% 52% 48% / 63% 59% 41 37%;
}

.btns:nth-last-child(1) {
  z-index: 10;
}
</style>
